<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Link 链接</title>
	<!-- 导入样式 -->
	<!-- <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" /> -->
	<link rel="stylesheet" href="../static/css/element2.css">
	<!-- 导入 Vue 3 -->
	<!-- <script src="//unpkg.com/vue@next"></script> -->
	<script src="../static/js/vue.global.prod.js"></script>
	<!-- <script src="../static/js/vue.global.js"></script> -->
	<!-- 导入组件库 -->
	<!-- <script src="//unpkg.com/element-plus"></script> -->
	<script src="../static/js/element-plue2.js"></script>
	
	<script src="../static/js/icons-vue.js"></script>
	
	<link rel="stylesheet" href="../static/css/com.css">
</head>
<body>
<div id="app" class="">
	<el-divider content-position="left">基础用法</el-divider><!-- =============================================================== -->
	<p class="desc">基础的文字链接用法。</p>
	<div>
		<el-link href="http://www.baidu.com" target="_blank">default</el-link>&nbsp;
		<el-link type="primary">primary</el-link>&nbsp;
		<el-link type="success">success</el-link>&nbsp;
		<el-link type="warning">warning</el-link>&nbsp;
		<el-link type="danger">danger</el-link>&nbsp;
		<el-link type="info">info</el-link>
	</div>
	
	<el-divider content-position="left">禁用状态</el-divider><!-- =============================================================== -->
	<p class="desc">文字链接不可用状态。</p>
	<div>
		<el-link disabled>default</el-link>
		<el-link type="primary" disabled>primary</el-link>
		<el-link type="success" disabled>success</el-link>
		<el-link type="warning" disabled>warning</el-link>
		<el-link type="danger" disabled>danger</el-link>
		<el-link type="info" disabled>info</el-link>
	</div>
	
	<el-divider content-position="left">下划线</el-divider><!-- =============================================================== -->
	<p class="desc">文字链接下划线。</p>
	<div>
		<el-link :underline="false">Without Underline</el-link> &nbsp; 
		<el-link>With Underline</el-link>
	</div>
	
	<el-divider content-position="left">图标</el-divider><!-- =============================================================== -->
	<p class="desc">带图标的链接</p>
	<div>
		<el-link :icon="Icons.Edit">Edit</el-link> &nbsp; 
		<el-link>
			Check<el-icon><circle-check /></el-icon>
			<!-- <el-icon><circle-check></circle-check></el-icon> -->
		</el-link>
	</div>
	
</div>

</body>
<script>
const Main = {
	data() {
		return {
			Icons: ElementPlusIconsVue,
			msg: 'Hello Vue!!'
		}
	},
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)};
app.use(ElementPlus);
app.mount("#app");

</script>
</html>